---
type: tutorial
unitTitle: Construisez et concevez avec les composants Astro UI
title: 'Point de contrôle : Unité 3 - Composants'
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Créez des composants Astro pour réutiliser le code des éléments communs sur votre site web
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


Maintenant que vous avez des fichiers `.astro` et `.md` générant des pages entières sur votre site web, passons à la création et à la réutilisation de petits morceaux d'HTML avec des composants Astro !

## Où allons-nous ?

Dans cette unité, vous apprendrez à créer des **composants Astro** pour réutiliser le code des éléments communs sur votre site web.

Vous construirez :
- Un composant de navigation qui présente un menu de liens vers vos pages
- Un composant de pied de page à inclure en bas de chaque page
- Un composant de médias sociaux, utilisé dans le pied de page, qui renvoie vers des pages de profil
- Un composant interactif Hamburger pour basculer la navigation sur mobile

En chemin, vous utiliserez CSS et JavaScript pour créer un design réactif qui réagit aux tailles d'écran et aux interactions de l'utilisateur.



<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je suis prêt à construire quelques composants Astro !
</Checklist>
</Box>
